<template>
    <div class="el-col-xs-24 el-col-sm-24 el-col-md-12 el-col-md-offset-6"
         style="height: 100vh;position:absolute;overflow-y: auto;background-color: #f3f4f5;box-shadow: 6px 0 5px -5px #4F4F4F,-6px 0 5px -5px #4F4F4F;">
        <div style="height: 50px;background-color: #2F4056;">
            <div style="display:flex;align-items:center;height: 100%;margin-left: 30px;color:white;font-size:18px;font-weight: 500">
                <span>
                  <a href="javascript:history.back();" style="color: white">
                    <i class="el-icon-back" style="margin-right: 10px;"></i>
                  </a>
                  问卷设计器
                </span>
                <el-button icon="el-icon-circle-plus-outline" style="position: absolute;right: 15px;background-color: #2F4056;border: none;color: white" @click="toFormDesign()">
                  新建问卷
                </el-button>
            </div>
        </div>
        <div style="padding: 30px 30px 20px;">
            <div v-for="item in form" :key="item.formId" style="margin-bottom:10px;background-color:#2F4056;display:flex;align-items:center;text-align:left;cursor:pointer;height: 70px;width: 100%;border-radius:4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
                <a style="width: 94%;position: relative" @click="toForm(item)">
                    <div style="width:100%;margin-left:3%;color: white;overflow: hidden;white-space:nowrap;font-size: 14px;font-weight: bold;">
                      {{item.form_title}}
                      <a style="height: 30px;font-size:12px;padding-left:5px;padding-right:5px;font-weight:normal;background-color: #FFB800;border: 1px solid #FFB800;border-radius: 4px;color: white">
                        {{ item.form_class }}
                      </a>
                    </div>
                    <p style="margin-left:3%;color: #c2c2c2;font-size: 12px;float: left">
                        创建人：{{item.form_creater}} <br> 创建时间：{{item.form_create_time}}
                    </p>
                    <div style="color: #FFB800;font-size: 13px;float: left;position: absolute;right: 0;">
                        <p>进行中</p>
                    </div>
                </a>
            </div>
            <div style="display:flex;align-items:center;text-align:left;cursor:pointer;height: 70px;width: 100%;border-radius:4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border: 1px solid #393D49;">
                <a style="width: 94%;position: relative" @click="toFormDesign()">
                    <div style="width:100%;margin-left:3%;color: #2F4056;overflow: hidden;white-space:nowrap;font-size: 14px;font-weight: bold;">
                      新增信息收集
                    </div>
                    <p style="margin-left:3%;color: #2F4056;font-size: 12px;">
                        点击此处<br> 创建
                    </p>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import {Base64} from "js-base64";
    export default {
        name: "Index",
        data: function () {
            return {
                /** 表单创建人的 统一身份认证 信息 */
                admin: {

                },
                /** 此管理员所创建过的 表单数据 */
                form: [

                ]
            }
        },
        methods:{
            /** 管理员点击新建表单，进入表单创建页面 */
            toFormTemplate: function () {
              /** 获取系统内置模板 和本人创建的模板，系统内置模板是所有管理员共享的，本人创建模板仅本人可查看 编辑 */
              this.$router.push({
                path: `/form-template/${this.admin.man_id}/`,
              });
            },
            /** 管理员点击新建表单，进入表单创建页面 */
            toFormDesign: function () {
                this.$router.push({
                    path: `/form-design/`,
                });
            },
            /** 管理员点击创建过的表单，进入此表单管理 ,学生点击表单，填写表单*/
            toForm: function (item) {
              this.$router.push({
                path: `/form-display/${item.form_object_id}/`,
              });
            },
        },
        created: function () {
          axios.get("http://49.232.95.128:10007/form/getAll"
          ).then((response) => {
            if (response.data.code === 0){
              this.form = response.data.data;
            }
          }).catch((error) => {
            console.log(error);
          });
        }
    }
</script>

<style scoped>

</style>
